<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CSS 伪元素</title>
		<style>
			/* ::first-line 伪元素 */
			.first-line-example::first-line {
				color: #ff0000;
				font-variant: small-caps;
			}

			/* ::first-letter 伪元素 */
			.first-letter-example::first-letter {
				font-size: 3em;
				font-weight: bold;
				color: #ff0000;
			}

			/* ::before 伪元素 */
			h2::before {
				/* content:url(smiley.gif); 插入图片 */
				content: '▲';
				color: #ff0000;
			}

			/* ::after 伪元素 */
			h3::after {
				content: '▼';
				color: #ff0000;
			}
		</style>

		<style>
			table {
				width: 100%;
				border-collapse: collapse;
			}
			th,
			td {
				border: 1px solid #ddd;
				padding: 8px;
			}
			th {
				background-color: #f2f2f2;
				text-align: left;
			}
			tr:hover {
				background-color: #f5f5f5;
			}
		</style>
	</head>
	<body>
		<!-- :first-line 伪元素："first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。 -->
		<p class="first-line-example">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />Veritatis nam consectetur illo magnam mollitia
			obcaecati ullam, amet reiciendis reprehenderit officia ex inventore suscipit consequuntur optio placeat neque
			quis, dolorem eum?
		</p>

		<hr />

		<!-- :first-letter 伪元素："first-letter" 伪元素用于向文本的首字母设置特殊样式。 -->
		<p class="first-letter-example">Hello, world!</p>

		<hr />

		<!-- :before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。 -->
		<h2>:before 伪元素</h2>

		<hr />

		<!-- :after 伪元素：":after" 伪元素可以在元素的内容后面插入新内容。 -->
		<h3>This is a paragraph.</h3>

		<hr />

		<table>
			<caption>
				<h1>所有CSS伪类/元素</h1>
				<p>
					实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
				</p>
			</caption>
			<thead>
				<tr>
					<th>选择器</th>
					<th>示例</th>
					<th>示例说明</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>:link</td>
					<td>a:link</td>
					<td>选择所有未访问链接</td>
				</tr>
				<tr>
					<td>:visited</td>
					<td>a:visited</td>
					<td>选择所有访问过的链接</td>
				</tr>
				<tr>
					<td>:active</td>
					<td>a:active</td>
					<td>选择正在活动链接</td>
				</tr>
				<tr>
					<td>:hover</td>
					<td>a:hover</td>
					<td>把鼠标放在链接上的状态</td>
				</tr>
				<tr>
					<td>:focus</td>
					<td>input:focus</td>
					<td>选择元素输入后具有焦点</td>
				</tr>
				<tr>
					<td>:first-letter</td>
					<td>p:first-letter</td>
					<td>选择每个&lt;p&gt; 元素的第一个字母</td>
				</tr>
				<tr>
					<td>:first-line</td>
					<td>p:first-line</td>
					<td>选择每个&lt;p&gt; 元素的第一行</td>
				</tr>
				<tr>
					<td>:first-child</td>
					<td>p:first-child</td>
					<td>选择器匹配属于任意元素的第一个子元素的 &lt;p&gt; 元素</td>
				</tr>
				<tr>
					<td>:before</td>
					<td>p:before</td>
					<td>在每个&lt;p&gt;元素之前插入内容</td>
				</tr>
				<tr>
					<td>:after</td>
					<td>p:after</td>
					<td>在每个&lt;p&gt;元素之后插入内容</td>
				</tr>
				<tr>
					<td>:lang(language)</td>
					<td>p:lang(it)</td>
					<td>为&lt;p&gt;元素的lang属性选择一个开始值</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
